<template>
  <div id="outlines">
    <el-card :body-style="{ padding: '0px' }">
      <div slot="header" class="olheader">
        <span>大纲管理</span>
        <el-button type="primary" @click="dlVisible=true;formOutlines.parent_id=0;getOutlines">+创建根节点</el-button>
      </div>
      <el-input placeholder="输入关键字进行过滤" v-model="filterText">
      </el-input>
      <el-tree v-loading="loading" :data="outlines" :props="{label:'outline_name',children:'children'}" ref="olmenus" :filter-node-method="filterNode" default-expand-all class="filter-tree">
        <div slot-scope="{data,node}" class="olcontent">
          <!-- 大纲管理名称 -->
          {{data.outline_name}}
          <!-- 大纲管理按钮 -->
          <!--添加子节点按钮 -->
          <el-button type="primary" size="mini" @click=" dlVisible=true;formOutlines.parent_id=data.id" class="addch">+添加子节点</el-button>
          <!-- 编辑按钮 -->
          <el-button type="primary" size="mini" @click.stop="edlVisible=true;eformOutlines=data" icon="el-icon-edit" class="editch">编辑</el-button>
          <!-- 删除按钮 -->
          <el-button type="danger" size="mini" @click.stop="del(data.id)" icon="el-icon-cancel" class="delch">删除</el-button>
          <!-- 向上排序按钮 -->
          <el-button type="text" @click.stop="sort(data.id,'up')" icon="el-icon-arrow-up" class="upch"></el-button>
          <!-- 向下排序按钮 -->
          <el-button type="text" @click.stop="sort(data.id,'down')" icon="el-icon-arrow-down" class="downch"></el-button>
        </div>
      </el-tree>
    </el-card>
    <!-- 点击添加节点按钮出现的页面 -->
    <el-dialog title="添加大纲" :visible="dlVisible" width="40%" @close="cancel">
      <el-form :model="formOutlines" ref="formOutlines" label-width="120px" :rules="rules">
        <el-form-item label="编号" prop="id">
          <el-input v-model="formOutlines.parent_id"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="outline_name">
          <el-input v-model="formOutlines.outline_name"></el-input>
        </el-form-item>
        <el-form-item label="是否显示到导航" prop="status">
          <el-select v-model="formOutlines.status" placeholder="">
            <el-option label="显示" value="1" checked> </el-option>
            <el-option label="不显示" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
              </span>
    </el-dialog>
    <!-- 点击编辑按钮出现的页面 -->
    <el-dialog title="编辑大纲" :visible="edlVisible" width="40%" :show-close="false">
      <el-form :model="eformOutlines" ref="eformOutlines" label-width="120px" :rules="rules">
        <el-form-item label="编号" prop="id">
          <el-input v-model="eformOutlines.id"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="outline_name">
          <el-input v-model="eformOutlines.outline_name"></el-input>
        </el-form-item>
        <el-form-item label="是否显示到导航" prop="status">
          <el-select v-model="eformOutlines.status" placeholder="">
            <el-option label="显示" value="1" checked> </el-option>
            <el-option label="不显示" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
                <el-button @click="ecancel">取 消</el-button>
                <el-button type="primary" @click="edit">确 定</el-button>
              </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    // 监听关键字的过滤
    watch: {
      filterText(val) {
        this.$refs.olmenus.filter(val);
      }
    },
    data() {
      return {
        filterText: '',
        flag1: false,
        dlVisible: false,
        edlVisible: false,
        loading: false,
        outlines: [],
        formOutlines: {
          parent_id: "",
          outline_name: "",
          parent_id: "",
          status: "1"
        },
        eformOutlines: {
          outline_name: "",
          status: "1",
          id: ""
        },
        rules: {
          outline_name: [{
            validator: (rule, val, callback) => {
              this.axios.get(`/outlines/exists/outline_name/${val}`).then(ret => {
                if (ret.data == true) {
                  callback(new Error("该名称已被注册"));
                } else {
                  callback();
                }
              });
            },
            trigger: "change"
          }]
        }
      };
    },
    created() {
      this.getOutlines();
    },
    methods: {
      //过滤搜索框里面的关键字
      filterNode(value, data) {
        if (!value) return true;
        return data.outline_name.indexOf(value) !== -1;
      },
      //编辑
      edit() {
        this.$refs.editformMenus.validate((flag) => {
          if (flag) {
            this.axios.put(`/outlines/edit/${this.eformOutlines.id}`, {
              outline_name: this.eformOutlines.outline_name,
              status: this.eformOutlines.status
            }).then(() => {
              this.$message.success("编辑成功");
              this.edlVisible = false;
              this.$refs.eformOutlines.resetFields();
              this.getOutlines();
            })
          }
        })
      },
      //编辑里面的取消
      ecancel() {
        this.edlVisible = false;
        this.$refs.eformOutlines.resetFields();
      },
      //添加里面的取消
      cancel() {
        this.dlVisible = false;
        this.$refs.formOutlines.resetFields();
      },
      //添加
      add() {
        this.$refs.editformMenus.validate((flag) => {
          if (flag) {
            this.axios.post("/outlines/add", this.formOutlines).then(() => {
              this.$message.success("添加成功");
              this.dlVisible = false;
              this.$refs.formOutlines.resetFields();
              this.getOutlines();
            });
          }
        })
      },
      //删除
      del(id) {
        this.$confirm("确定删除吗？", "提示")
          .then(() => {
            this.axios
              .delete(`/outlines/del/${id}`)
              .then(() => {
                this.$message.success("删除成功");
                this.getOutlines();
              })
              .catch(() => {
                this.$message.error("删除失败");
              });
          })
          .catch(() => {});
      },
      //向上向下
      sort(id, dir) {
        this.axios.put(`/outlines/sort/${id}/${dir}`).then(() => {
          this.getOutlines();
        });
      },
      //获取
      getOutlines() {
        this.loading = true;
        this.axios
          .get("/outlines", {
            params: {
              fieldVal: this.fieldVal
            }
          })
          .then(ret => {
            this.loading = false;
            this.outlines = ret.data;
          })
          .catch(() => {
            this.$message.error("获取数据失败");
          });
      }
    }
  };
</script>
<style>
  #outlines .olheader {
    display: flex;
    justify-content: space-between;
  }
  #outlines .el-input {
    margin: 2% 2%;
    width: 96%;
  }
  #outlines .el-tree-node__content {
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    width: 95%;
    margin: 3px 2%;
  }
  #outlines .el-button--success {
    margin-left: 50px;
  }
  #outlines .olcontent {
    position: relative;
  }
  #outlines .addch {
    position: absolute;
    left: 600px;
    top: -5px;
  }
  #outlines .editch {
    position: absolute;
    left: 700px;
    top: -5px;
  }
  #outlines .delch {
    position: absolute;
    left: 785px;
    top: -5px;
  }
  #outlines .upch {
    position: absolute;
    left: 870px;
    top: -10px;
  }
  #outlines .downch {
    position: absolute;
    left: 910px;
    top: -10px;
  }
</style>


